<template>
  <div class=" bg-red-50">
    <div class="image-wrapper ">
      <img @click="showDialog = true" class="img hover:cursor-pointer"
        :src="`http://127.0.0.1:8081${tableData.businessImage}`">
      <!-- 修改头像 -->
      <v-dialog v-model="showDialog" persistent width="600">
        <v-card>
          <v-card-text>
            <v-form>
              <v-container>
                <v-row>
                  <v-col>
                    <v-file-input accept="image/*" @change="onFileChange" label="上传图片" show-size color="success"
                      truncate-length="20">
                    </v-file-input>
                  </v-col>
                </v-row>
              </v-container>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue-darken-1" type="submit" variant="text" @click="showDialog = false"> 关闭 </v-btn>
            <v-btn color="blue-darken-1" type="submit" variant="text" @click="updateBusinessImage()"> 保存 </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <br>
    </div>
    <div class="table1 bg-white rounded-3xl shadow-xl">
      <v-table class="table">
        <tbody>
          <tr>
            <td class="text-orange-500 w-60">店铺ID</td>
            <td>{{ tableData.businessId }}</td>
          </tr>
          <tr>
            <td class="text-orange-500 w-60">店名</td>
            <td>{{ tableData.businessName }}</td>
          </tr>
          <tr>
            <td class="text-orange-500 w-60">店主</td>
            <td>{{ tableData.userName }}</td>
          </tr>
          <tr>
            <td class="text-orange-500 w-60">所在地</td>
            <td>{{ tableData.businessAddress }}</td>
          </tr>
          <tr>
            <td class="text-orange-500 w-60">联系方式</td>
            <td>{{ tableData.businessPhone }}</td>
          </tr>
          <tr>
            <td class="text-orange-500 w-60">简介</td>
            <td>{{ tableData.businessProfile }}</td>
          </tr>
        </tbody>
      </v-table>
    </div>
    <br>
    <v-container class="m-0 m-auto ">
      <v-row justify="center" align="center">
        <!-- 修改密码 -->
        <v-dialog v-model="dialog1" persistent width="1024">
          <template v-slot:activator="{ props }">
            <v-btn v-bind="props"
              style="border-radius:10%;background-color:cornsilk;margin:0 30px;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1)">
              修改密码 </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h6">修改商家密码</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12">
                    <v-text-field label="旧密码*" type="password" v-model="form1.oldPass" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                  </v-col>
                  <v-col cols="12">
                    <v-text-field label="新密码*" type="password" v-model="form1.password" required></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field label="确认密码*" type="password" required></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
              <small>*号不可为空</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="dialog1 = false"> 取消 </v-btn>
              <v-btn color="blue-darken-1" variant="text" @click="updateBusinessPass"> 保存 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <!-- 修改店铺信息 -->
        <v-dialog v-model="dialog2" persistent width="1024">
          <template v-slot:activator="{ props }">
            <v-btn v-bind="props"
              style="border-radius:10%;background-color:cornsilk;margin:0 30px;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1)">
              修改信息 </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h6">修改店铺信息</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12">
                    <v-text-field label="店名*" v-model="form2.businessName" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-text-field label="店铺所在地*" v-model="form2.businessAddress" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-text-field label="联系方式*" v-model="form2.businessPhone" required></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field label="店铺简介*" v-model="form2.businessProfile" required></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
              <small>*号不可为空</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="dialog2 = false"> 取消 </v-btn>
              <v-btn color="blue-darken-1" variant="text" @click="updateBusinessInfo"> 保存 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <!-- 店铺转让 -->
        <v-dialog v-model="dialog3" persistent width="1024">
          <template v-slot:activator="{ props }">
            <v-btn v-bind="props"
              style="border-radius:10%;background-color:cornsilk;margin:0 30px;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1)">
              店铺转让 </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h6">填写转让人</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12">
                    <v-text-field label="转让人用户名*" v-model="form3.userName" required></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field label="转让人姓名*" v-model="form3.name" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                  </v-col>
                  <v-col cols="12">
                    <v-text-field label="转让人联系方式*" v-model="form3.phone" required></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
              <small>*号不可为空</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="dialog3 = false"> 取消 </v-btn>
              <v-btn color="primary" class="ma-2" @click="dialog4 = true"> 确定 </v-btn>
              <v-dialog v-model="dialog4" width="auto">
                <v-card>
                  <v-card-title class="text-h5">
                  </v-card-title>
                  <v-card-text>确定转让给该人吗？</v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="red-darken-1" variant="text" @click="dialog4 = false"> 取消 </v-btn>
                    <v-btn color="green-darken-1" variant="text" @click="updateBusinessTransfer"> 确定 </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-btn
          style="border-radius:10%;background-color:cornsilk;margin:0 30px;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1)"
          @click="dialog5 = true"> 店铺注销 </v-btn>
        <v-dialog v-model="dialog5" width="auto">
          <v-card>
            <v-card-title class="text-h5">
            </v-card-title>
            <v-card-text>确定注销店铺吗？</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="red-darken-1" variant="text" @click="dialog5 = false"> 取消 </v-btn>
              <v-btn color="green-darken-1" variant="text" @click="updateBusinessAccount"> 确定 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    </v-container>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data: () => ( {
    tableData: [],// 接收后端数据
    // 修改密码
    dialog1: false,
    form1: {
      oldPass: '',
      password: '',
    },
    // 修改店铺信息
    dialog2: false,
    form2: {
      businessName: '',
      businessAddress: '',
      businessPhone: '',
      businessProfile: '',
    },
    // 店铺转让
    dialog3: false,
    dialog4: false,
    form3: {
      userName: '',
      name: '',
      phone: '',
    },
    // 店铺注销
    dialog5: false,
    // 修改头像
    showDialog: false,
    businessImage: '',
  } ),
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/selectBusinessInfo',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.businessInfo
          this.businessInfo()
        }
      } )
    },
    // 修改店铺登录密码
    updateBusinessPass() {
      this.dialog1 = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateBusinessPass',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          password: this.form1.password,
          oldPass: this.form1.oldPass,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
        }
      } )
    },
    // 店铺信息获取
    businessInfo() {
      this.form2.businessName = this.tableData.businessName
      this.form2.businessAddress = this.tableData.businessAddress
      this.form2.businessPhone = this.tableData.businessPhone
      this.form2.businessProfile = this.tableData.businessProfile
    },
    // 修改店铺信息
    updateBusinessInfo() {
      this.dialog2 = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateBusinessInfo',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          businessName: this.form2.businessName,
          businessAddress: this.form2.businessAddress,
          businessPhone: this.form2.businessPhone,
          businessProfile: this.form2.businessProfile,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          location.reload();
        }
      } )
    },
    // 店铺转让
    updateBusinessTransfer() {
      this.dialog4 = false
      this.dialog3 = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateBusinessTransfer',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          userName: this.form3.userName,
          name: this.form3.name,
          phone: this.form3.phone,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          this.getData()
        }
      } )
    },
    // 店铺注销
    updateBusinessAccount() {
      this.dialog5 = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateBusinessAccount',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          this.$router.push( '/business/login' )
        }
      } )
    },
    // 图片上传
    onFileChange( file ) {
      let formData = new FormData();
      formData.append( 'file', file.target.files[ 0 ] );
      axios.post( 'http://127.0.0.1:8081/api/business/onFileChangeBusiness', formData, { headers: { 'token': window.localStorage.getItem( "businessToken" ) } } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.businessImage = res.data.data.businessImage
        }
      } )
    },
    // 修改店铺头像
    updateBusinessImage() {
      this.showDialog = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateBusinessImage',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          businessImage: this.businessImage
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload();
        }
      } )
    }
  }
}


</script>
<style scoped>
.table {
  height: 300px;
  width: 500px;
  margin: 0 auto;
}

.img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: 0 auto;
  border: 3px solid white;
  box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

img:hover {
  opacity: .3;
}

.image-wrapper {
  position: relative;
}

.table1 {
  width: 600px;
  padding: 20px;
  margin: 0 auto;
}

.note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  color: white;
  cursor: pointer;
}
</style>
